<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn" name="anniu">这是一个按钮</button>
		<ul id=ul>
			<li>张三</li>
			<li id=li>李四</li>
		</ul>
		<script type="text/javascript">
		/*1.获取元素节点（对象）*/
			var btn=document.getElementById("btn");/*通过id属性获取一个对象*/
			var btn2=document.getElementsByTagName("button"); /*通过标签名获取一组对象*/
			var btn3=document.getElementsByName("anniu");/*通过name属性获取一组对象*/
		/*操作对象*/
			console.log(btn.innerHTML);
			for(var i=0;i<btn2.length;i++){
				console.log(btn2[i].innerHTML);
				}
			for(var i=0;i<btn3.length;i++){
				console.log(btn3[i].innerHTML);
				}
			
			var btn4=document.getElementById("ul");/*为获取元素节点的子节点做准备*/
		/*2.获取元素节点的子节点*/
			var btn5=btn4.getElementsByTagName("li");/*方法*/
			/*属性*/
			var cns=btn4.childNodes;/*不推荐*/
			var cns2=btn4.children;/*推荐*/
			var cns3=btn4.firstChild;
		/*操作对象*/
			for(var i=0;i<btn5.length;i++){
				console.log(btn5[i].innerHTML);
			}
			console.log(cns.length);
			for(var i=0;i<cns2.length;i++){
				console.log(cns2[i].innerHTML);
			}
			console.log(cns3.innerHTML);/*元素间的空行返回undefined*/
			
			var btn6=document.getElementById("li");/*为获取元素节点的父节点和兄弟节点做准备*/
		/*3.获取元素节点的父节点*/
			var pn=btn6.parentNode;
		/*操作对象*/
			console.log(pn.innerHTML)/*输出父节点里面的内容*/
		/*3.获取前一个兄弟节点*/
			var ps=btn6.previousSibling;
		/*操作对象*/
			console.log(ps.innerHTML);/*元素间的空行返回undefined*/
		</script>
	</body>
</html>
